<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

    <style>
        {#body{background: url("../static/img/DSC_1051.JPG");background-size:cover;width: 100%;height: 100%}#}
        *{margin: 0;padding: 0}
        .title{margin: 30px auto;}
        .title h1{text-align: center;color: orangered}
        .swiper-container {width: 50%;height: 400px;display: inline-block}
        img{width: auto;height: 400px;}
        .bottom{text-align: center;margin: 150px auto;width: 280px;}
        .bottom a{text-decoration: none}
        .count_left{background: aqua;width: 24%;height: 400px;display: inline-block;overflow: hidden}
        .count_right{background: orange;width: 24%;height: 400px;display: inline-block;overflow: hidden}
        .count{width: 100%;height: 400px}
        .bottom a :hover{color: fuchsia}
        .count_left ,.count_right h2{line-height:400px;text-align: center}

        .register_login p a{text-decoration: none;color:red}

        .heade{width: 95%;margin: auto}
        ul{margin: 20px auto;text-align: center;width: 95%;}
        ul li{list-style: none;float: left;font-size: 20px;
                width: 7.5%;background: gray;margin-bottom: 20px;height: 40px}
        .heade ul li a{text-decoration: none;margin-bottom: 20px;font-size: 20px;line-height: 40px;color: aliceblue}
        .heade ul li:hover{background: darkgrey}
        .heade .home{
            background: red;
        }
    </style>
</head>
<body>

    <div class="title">
        <h1>欢迎来到扯淡吧</h1>
    </div>

    <div class="heade">
        <ul>
            <li class="home"><a href="/">首页</a></li>
            {% for s in conStyl %}
            <li><a href="{% url 'app:content' s.s_ename 1 %}">{{ s.s_name }}</a></li>
            {% endfor %}
            <li><a href="/app/register">注册</a></li>
            <li><a href="/app/mine">{{ uname }}</a></li>
            <li><a href="/app/outlogin">退出</a></li>
        </ul>
        </div>

{#    轮播图#}
    <div class="count">

            <div class="count_left">
                <h2>简介</h2>

            </div>


            <div class="swiper-container">
    <div class="swiper-wrapper">
{#        轮播图片#}
        {% for i in imgs %}
        <div class="swiper-slide"><img src="{{ i.img }}"></div>
        {% endfor %}

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay: 1000,
            //切换速度为1s
    speed: 1000,

    // 如果需要分页器
    pagination: '.swiper-pagination'

  })

  </script>
</div>

            <div class="count_right">
                <h2>瞎扯</h2>

            </div>
    </div>


    <div class="bottom">
        <a href="#">
            <h1><a href="{% url 'app:content' 'wangzhe' 1 %}">>>一起扯淡吧</a></h1>
        </a>
    </div>





</body>
</html>